<?php
include_once 'checkAdmin.php';
?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我最爱的汽车投票</title>
    <style>
        h1, h2 {
            text-align: center
        }

        h2 {
            font-size: 20px;
        }

        h2 a {
            text-decoration: none;
            color: #4476A7;
        }

        h2 a:hover {
            text-decoration: underline;
            color: brown
        }

        .current {
            color: blueviolet
        }

        #main {
            margin: 40px auto
        }

        .type {
            width: 80%;
            margin: auto;
            text-align: center;
        }

        .type span {
            margin-right: 10px;
            cursor: pointer;
        }

        .type span:last-child {
            margin-right: 0
        }
    </style>
    <script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script src="js/echarts.min.js"></script>
</head>
<body>
<h1>车辆管理</h1>
<h2><a href="index.php">返回首页</a> <a href="admin.php">车辆管理</a> <a href="show.php" class="current">数据查看</a> <a
            href="logout.php">注销</a></h2>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 80%;height:400px;"></div>
<div class="type">
    <span id="type1" onclick="getData(1)">柱状图</span>
    <span id="type2" onclick="getData(2)">折线图</span>
    <span id="type3" onclick="getData(3)">饼状图</span>
</div>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    // 显示标题，图例和空的坐标轴
    myChart.setOption({
        title: {
            text: ''
        },
        tooltip: {},
        legend: {
            data: ['票数']
        },
        xAxis: {
            data: [],
            axisLabel: {
                interval: 0,  //设置间隔为0
                rotate: 30, //代表逆时针旋转
            }
        },
        yAxis: {},
        series: [{
            name: '票数',
            type: 'bar',
            data: []
        }],
        barWidth: 30,
    });
    $(function () {
        getData(1);
    })

    function getData(type) {
        $.ajax({
            url: 'getData.php?type=' + type,
            dataType: 'json',
            success: function (data) {
                let s = $("#type"+type).css('color','blueviolet').siblings('span').css('color','black');
                switch (type) {
                    case 1:
                        myChart.setOption({
                            xAxis: {
                                data: data.categories
                            },
                            series: [{
                                name: '票数',
                                type: 'bar',
                                data: data.data
                            }]
                        });
                        break;
                    case 2:
                        myChart.setOption({
                            xAxis: {
                                data: data.categories
                            },
                            series: [{
                                name: '票数',
                                type: 'line',
                                data: data.data
                            }]
                        });
                        break
                    case 3:
                        myChart.setOption({
                            xAxis: {
                                show:false
                            },
                            series: [{
                                type: 'pie',
                                data: data,
                                radius: '50%'
                            }]
                        });

                }
            },
            error: function () {
                alert('获取数据出错');
            }
        })
    }
</script>
</body>
</html>
